<template>
  <div class="tree-container startbox" @contextmenu.prevent="()=>false">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      <i slot="prefix" class="el-input__icon el-icon-search search"></i>
    </el-input>
    <div class="margin"></div>
    <el-tree
      icon-class="custom"
      :props="defaultProps"
      ref="tree"
      :load="loadNode"
      node-key="id"
      lazy
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <div
        class="custom-tree-node betweenbox"
        @contextmenu.prevent="contextmenuEvent(node.data)"
        slot-scope="{ node }"
      >
        <!-- <el-tooltip effect="dark" placement="top" :content="node.label"> -->
        <div :title="node.label">
          <span>{{ node.label }}</span>
        </div>
        <!-- </el-tooltip> -->
        <div
          class="context-menu"
          @click.prevent="()=>false"
          v-show="node.data.menu"
          @click.stop="()=>false"
          @contextmenu.prevent="()=>false"
        >
          <div class="context-menu-control">
            <el-tooltip effect="dark" content="添加预置位" placement="top-end">
              <span
                v-if="node.data.type==='video'"
                @click="addYzw(node.data)"
                class="el-icon-circle-plus"
              ></span>
            </el-tooltip>
            <el-tooltip effect="dark" content="修改预置位" placement="top-end">
              <span
                v-if="node.data.type==='yzw'"
                class="el-icon-s-tools"
                @click="updateYzw(node.data)"
              ></span>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除预置位" placement="top-end">
              <span
                v-if="node.data.type==='yzw'"
                class="el-icon-delete-solid"
                @click="removeYzw(node)"
              ></span>
            </el-tooltip>
            <el-tooltip effect="dark" content="转到此预置位" placement="top-end">
              <span
                v-if="node.data.type==='yzw'"
                class="el-icon-video-camera-solid"
                @click="toYzw(node.data)"
              ></span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-tree>
    <el-dialog :visible.sync="visibleAddYzw" title="添加预置位" width="6rem" top="30vh">
      <AddYzw v-if="visibleAddYzw" :yzw="addYzwItem" @setYzw="setYzw" @closed="AddClosed" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog :visible.sync="visibleUpdateYzw" title="修改预置位" width="6rem" top="30vh">
      <UpdateYzw v-if="visibleUpdateYzw" :yzw="updateYzwItem" @closed="updateClosed" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";
import AddYzw from "./AddYzw.vue";
import UpdateYzw from "./UpdateYzw.vue";

interface menuData {
  menu?: boolean | undefined;
}
@Component({ components: { AddYzw, UpdateYzw } })
export default class extends Vue {
  defaultProps: Object = {
    children: "children",
    label: "name",
    isLeaf: "isLeaf",
  };
  menuData: menuData = {
    menu: false,
  };
  // 添加预置位弹窗显示和隐藏
  visibleAddYzw: boolean = false;
  // 添加预置位弹窗显示和隐藏
  addYzwItem: { [key: string]: any } = {};
  // 修改预置位弹窗显示和隐藏
  visibleUpdateYzw: boolean = false;
  // 修改预置位数据
  updateYzwItem: { [key: string]: any } = {};
  filterText: string = "";
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    if (tree) {
      tree.filter(val);
    }
  }
  addInframe() {
    // let el-picker-panel el-date-picker el-popper
    window.setTimeout(() => {
      let pickerArr = document.querySelectorAll(".el-message-box__wrapper");
      pickerArr.forEach((item) => {
        let width = item.clientWidth;
        let height = item.clientHeight;
        let iframe: any = item.querySelector("iframe");
        if (!iframe) {
          iframe = document.createElement("iframe");
          item.appendChild(iframe);
        }
        iframe.style.border = "none";
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
        iframe.style.position = "absolute";
        iframe.style.top = "0px";
        iframe.style.left = "0px";
        iframe.style.zIndex = 1;
        iframe.style.zIndex = 1;
        iframe.style.pointerEvents = "none";
      });
    }, 100);
  }
  // 删除预置位事件
  // el-message-box__wrapper
  removeYzw(node) {
    this.addInframe();
    let data = node.data;
    this.$confirm("是否删除预置位！", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      this.delPosition(data.id, () => {
        this.deleteSuccess(node, data);
      });
    });
  }
  // 删除预置位接口
  delPosition(id, fn) {
    let params = {
      id: id,
    };
    (this as any).$services
      .delPosition({ data: params, method: "DELETE", postparams: true })
      .then((result: any) => {
        if (result.data === "删除成功") {
          if (fn) {
            fn();
          }
          this.$message.success(result.data);
        } else {
          this.$message.warning(result.data);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 删除预置位成功后
  deleteSuccess(node, data) {
    let parent = node.parent.data;
    let params = {
      id: parent.id,
      type: parent.type,
    };
    let myBdzId = parent.myBdzId;
    let fn = (arr) => {
      this.$refs.tree.updateKeyChildren(parent.id, arr);
    };
    this.ssjctree(params, myBdzId, fn);
  }
  // set预置位
  setYzw(data) {
    this.$emit("setYzw", data);
  }
  // 跳转预置位
  toYzw(data) {
    this.$emit("toYzw", data);
  }
  // 添加预置位
  addYzw(data) {
    this.visibleAddYzw = true;
    this.addYzwItem = data;
  }
  // 预置位添加后
  AddClosed() {
    let addYzwItem = this.addYzwItem;
    let params = {
      id: addYzwItem.id,
      type: addYzwItem.type,
    };
    let myBdzId = addYzwItem.myBdzId;
    let fn = (arr) => {
      this.$refs.tree.updateKeyChildren(addYzwItem.id, arr);
    };
    this.ssjctree(params, myBdzId, fn);
    this.visibleAddYzw = false;
  }
  // 添加预置位
  updateYzw(data) {
    this.visibleUpdateYzw = true;
    this.updateYzwItem = data;
  }
  // 预置位修改完成时
  updateClosed(name) {
    let updateYzwItem = this.updateYzwItem;
    this.$set(updateYzwItem, "name", name);
    this.visibleUpdateYzw = false;
  }
  private mounted(): void {
    window.addEventListener("click", this.hideMenu);
  }
  private destroyed(): void {
    window.removeEventListener("click", this.hideMenu);
  }
  oldTime: number = 0;
  handleNodeClick(data: any) {
    this.hideMenu();
    let newTime = new Date().getTime();
    let oldTime = this.oldTime;
    if (oldTime) {
      let changeTime = newTime - oldTime;
      if (changeTime < 500) {
        let type = data.type;
        if (type === "video" || type === "bdz") {
          data.myCj = "ssjc";
          this.$emit("handleNodeClick", data);
        }
      }
    }
    this.oldTime = newTime;
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  //隐藏当前右击事件组件
  hideMenu() {
    this.menuData.menu = false;
  }
  //   鼠标右击事件
  contextmenuEvent(data) {
    this.hideMenu();
    if (data.type === "yzw" || data.type === "video") {
      data.menu = true;
      this.menuData = data;
    }
  }
  // 设置树图数据格式
  setTreeData(data, myBdzId) {
    let newData = data.map((v) => {
      v.myBdzId = myBdzId;
      if (v.type === "bdz") {
        let id = v.id || "";
        v.myBdzId = id.split("#")[0];
      }
      if (v.type === "yzw") {
        v.isLeaf = true;
      }
      v.menu = false;
      return v;
    });
    return newData;
  }
  // 获取树图数据
  ssjctree(params, myBdzId, fn) {
    (this as any).$services
      .ssjctree({ data: params })
      .then((result: any) => {
        let data = result.data || [];
        let newData = this.setTreeData(data, myBdzId);
        if (fn) {
          fn(newData);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 树图加载
  loadNode(node, resolve) {
    let params: any;
    let myBdzId = "";
    if (node.level > 0) {
      let data = node.data;
      myBdzId = data.myBdzId || "";
      params = {
        id: data.id,
        type: data.type,
      };
    }
    this.ssjctree(params, myBdzId, resolve);
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    position: relative;

    .context-menu {
      position: absolute;
      top: 0;
      bottom: 0;
      // right: 0rem;
      left: 2rem;
      margin: auto;
      &-control {
        padding: 0px 0.1rem;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0.2rem;
        margin: auto;
      }
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .margin {
    height: 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
html {
  body {
    .el-tree-node__content:hover {
      background-color: transparent;
    }
  }
}
</style>
